<!-- 聊天列表 -->
<template>
  <div class="msglist">
    <ul v-if="searchedChatlist.length > 0">
      <li
        v-for="(item,index) in searchedChatlist"
        :key="index"
        @click="selectSession(item.uid)"
        style="cursor: pointer;"
      >
      <section class="sessionlist" :class="{ active: item.uid === selectId }">
          <div class="list-left">
            <img class="avatar" width="42" height="42" :alt="item.user.name" :src="item.user.portrait ? item.user.portrait : img" />
            <span v-if="item.uid != selectId&&item.messages.length>0&&sessionNum(item).length>0">{{sessionNum(item).length > 100 ? "99+" : sessionNum(item).length}}</span>
          </div>
          <div class="list-right">
            <p class="name">{{item.user.name}}</p>
            <span class="time" v-if="item.messages.length>0">{{item.messages[item.messages.length-1].date | dateformat}}</span>
            <span class="time" v-if="item.messages.length == 0">{{datenow}}</span>
            <p class="lastmsg" v-if="item.messages.length>0">{{item.messages[item.messages.length-1].content}}</p>
          </div>
        </section>
      </li>
    </ul>
    <div class="no-friend" v-else>暂无聊天好友</div>
  </div>
</template>

<script>
import { mapState, mapActions, mapGetters } from "vuex"
import imgIcon from '../../assets/img/Icon1@2x.png'
import moment from 'moment' //时间插件
export default {
  data(){
    return {
      datenow: moment().format("HH:mm"),
      img: imgIcon
    }
  },
  computed: {
    ...mapState({
      selectId: state => state.chat.selectId,
      searchText: state => state.chat.searchText
    }),
    ...mapGetters(["searchedChatlist"])
  },
  methods: {
    ...mapActions(["selectSession"]),
    //小红点条数
    sessionNum(item){
        if(item.messages.length>0){
          let msg = item.messages.filter(item => {
              return item.redDot == 0
          })
          if(msg.length == 0)return msg = []
          else return msg
        }
    }
  },
  filters: {
    // 日期过滤
    dateformat (date) {
      // 获取前天
      let qtDay = moment().subtract(2, 'days').format("YYYY-MM-DD")
      // 昨天
      let yesterDay = moment().subtract(1, 'days').format("YYYY-MM-DD")
      // 今天
      let today = moment().subtract(0, 'days').format("YYYY-MM-DD")
      // 展示时间
      let time = moment(date).format('YYYY-MM-DD HH:mm')
      if(time.includes(qtDay))return "前天"
      else if(time.includes(yesterDay))return "昨天"
      else if(time.includes(today)) return moment(date).format('HH:mm')
      else return moment(date).format('YY/MM/DD')
    }
  },
  mounted(){
    
  }
};
</script>

<style lang="stylus" scoped>
.msglist {
  height: 65%;
  overflow-y: auto;

  .sessionlist {
    padding 12px;
    display: flex;
    transition: background-color 0.1s;
    font-size: 0;
    &:hover {
      background-color: rgb(220, 220, 220);
    }
    &.active {
      background-color: #c4c4c4;
    }

    .avatar {
      border-radius: 2px;
      margin-right: 12px;
      width 42px;
      height 42px;
    }

    .list-right {
      position: relative;
      flex: 1;
      margin-top: 4px;
    }

    .name {
      width: 160px;
      display: inline-block;
      vertical-align: top;
      font-size: 14px;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }

    .time {
      float: right;
      color: #999;
      font-size: 10px;
      vertical-align: top;
    }

    .lastmsg {
      position: absolute;
      font-size: 12px;
      width: 130px;
      height: 15px;
      line-height: 15px;
      color: #999;
      bottom: 4px;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }
  }
  .no-friend {
    text-align center;
    margin-top 20px;
    color #999;
  }
  .list-left {
    position relative;
    span {
      color: #fff;
      display: inline-block;
      width: 22px;
      height: 20px;
      line-height: 20px;
      text-align: center;
      background: red;
      border-radius: 10px;
      position: absolute;
      top: -7px;
      right: 3px;
      font-size: 12px;
    }
  }
}
</style>
